<template>
 <div class="app-container">
    <el-form ref="form" :inline="true" :model="form" label-width="120px" size="medium">
      <el-form-item label="工单号码" prop="sectionNo">
          <el-input v-model="form.sectionNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="物料品号" prop="sectionNo">
          <el-input v-model="form.sectionNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="检验状态" prop="sectionNo">
          <el-input v-model="form.sectionNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="首检数" prop="sectionNo">
          <el-input v-model="form.sectionNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="抽检总数" prop="sectionNo">
          <el-input v-model="form.sectionNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="检验结果" prop="issueLarge">
        <el-input v-model="form.issueLarge" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <el-form-item label="抽检不良数" prop="issueIndexes">
        <el-input v-model="form.issueIndexes" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <el-form-item label="总不良数量" prop="responsibility">
        <el-input v-model="form.responsibility" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <!-- <el-form-item label="问题描述" prop="issueId">
        <el-input v-model="form.issueId" style="width:300px" placeholder="请先选择问题小类" disabled/>
      </el-form-item>
      <el-form-item label="问题图片">
          <el-image
            style="width: 300px; height: 300px"
            :src="form.imageUrl"
            :fit="fit"
            :error="imageError"
            :preview-src-list="previewList"
          >
          </el-image>
      </el-form-item>
      <el-form-item label="处理结果" prop="natureCoefficient">
          <el-input v-model="form.natureCoefficient" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="工序代码" prop="produceName">
          <el-input v-model="form.produceName" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="缺陷流水号" prop="specification">
          <el-input v-model="form.specification" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="缺陷性质" prop="specification">
          <el-input v-model="form.specification" style="width:300px" disabled/>
      </el-form-item> -->
      <el-form-item label="性质" prop="specification">
          <el-input v-model="form.specification" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="操作员" prop="processName">
          <el-input v-model="form.processName" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="操作者考核" prop="technologyNo">
          <el-input v-model="form.technologyNo" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="管理者" prop="createTime">
          <el-input v-model="form.createTime" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="管理者考核" prop="scanTime">
          <el-input v-model="form.scanTime" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="原因分析" prop="scanTime">
          <el-input type="textarea" autosize v-model="form.scanTime" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="改善措施" prop="scanTime">
          <el-input type="textarea" autosize v-model="form.scanTime" style="width:300px" disabled/>
      </el-form-item>
      <el-form-item label="备注" prop="scanTime">
        <div style="width:600px">
          <el-input type="textarea" autosize v-model="form.imageUrl" style="width:300px" disabled/>
        </div>
      </el-form-item>
      
      <el-form-item label="流程卡照片">
        <el-upload
            action="http://192.168.3.11:8086/technologyFile"
            :limit="1"
            :file-list="fileList"
            :auto-upload="false"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="form.imageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="检验报告照片" >

        <el-upload
            action="http://192.168.3.11:8086/technologyFile"
            :limit="1"
            :file-list="fileList"
            :auto-upload="false"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="form.imageUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="检验时间" prop="scanTime"  label-width="120px">
        <div style="width:600px">
          <el-input v-model="form.scanTime" style="width:300px" disabled/>
        </div>
      </el-form-item>

    </el-form>

    <el-divider></el-divider>

    <div class="btn-button">

        <el-button type="primary" @click="submitForm">保存</el-button>

    </div>

  </div>
</template>

<script>
import { getDisqualificationPage,getIssueIndexes } from '@/api/qualityQuery'
export default {
    name: 'CNCqualityDetail',
    data() {
        return {
            form: {
                imageUrl: '',                       //问题图片
                natureCoefficient: '',              //扣除的品质系数
                processName: '',                    //工序名称
                technologyNo: '',                   //产品编号
                createTime: '',                     //创建时间
                produceName: '',                    //产品名
                specification: '',                  //规格
                sectionNo: '',                      //工段编号
            },
            fit: 'contain',                         //确定图片适应容器框的方式
            listQuery: {            //查询信息存放表单
                disqualificationId: ''
            },
            dialogVisible: false,
            fileList: []
        }
    },
    methods: {
        // 切割图片url组成的字符串成为数组
        cuttingStr(value) {
            let imageArr = []                           //存储图片url的数组
            if(value != '') {                           //第一层嵌套判断是否有图片，为空直接返回一个空数组
                imageArr = value.split('|')             //第二层嵌套将图片拆分为数组
                return imageArr
            } else {
                return imageArr
            }
        },
        // 监听删除图片
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        // 监听图片预览
        handlePictureCardPreview(file) {
            console.log('file.url',file.url)
            this.form.imageUrl = file.url;
            this.dialogVisible = true;
        },
        // 获取问题详情
        async getDisqualificationPage() {
            const query = Object.assign({},this.listQuery)
            const {data} = await getDisqualificationPage(query)
            this.form = data.records[0]
            this.form.imageUrl = 'http://192.168.3.11:8086/image/detection/92c69b91008b48c08fd3d80bdced90fe.png'
            this.dialogVisible = true
        },
        // 保存修改
        async submitForm(){
            const query = Object.assign({},this.form)
            const {data} = await getDisqualificationPage(query)
        }
    },
    // 进入页面时获取vuex保存的id
    mounted() {
        this.listQuery.disqualificationId = this.$store.state.app.disqualificationId
        this.form.imageUrl = 'http://192.168.3.11:8086/image/detection/92c69b91008b48c08fd3d80bdced90fe.png'
        this.fileList.push({name:'',url:'http://192.168.3.11:8086/image/detection/92c69b91008b48c08fd3d80bdced90fe.png'})
    //   this.getDisqualificationPage()
    }
}
</script>

<style>
.btn-button{
    display: flex;
    justify-content: flex-end;
}
</style>